<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

<template>
	<main>
		<div class="service-intro">
			<h2>{{ t('home.service.title') }}</h2>
			<p v-if="false">{{ t('home.service.content') }}</p>
		</div>

		<div class="services-grid">
			<div v-for="(service, index) in 4" :key="index" class="service-card">
				<div class="service-icon">
					<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
						<path
							d="M12 2L2 7v10c0 5.55 3.84 9.739 9 11 5.16-1.261 9-5.45 9-11V7l-10-5z"
						/>
					</svg>
				</div>
				<h3 class="service-title">
					<span v-if="index === 0">
						{{ t(`home.service.dom${index + 1}`).split('/')[0] }}/
						<br />
						{{ t(`home.service.dom${index + 1}`).split('/')[1] }}
					</span>
					<span v-else>
						{{ t(`home.service.dom${index + 1}`) }}
					</span>
				</h3>
				<p class="service-description" v-if="false">
					{{ t(`home.service.domContent${index + 1}`) }}
				</p>
			</div>
		</div>
	</main>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 服务组件样式 - service.vue
 * ===========================================
 */

main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-4);
}

/* ===========================================
 * 服务介绍区域
 * =========================================== */

.service-intro {
	text-align: center;
	max-width: 900px;
	margin: var(--space-16) auto;
	padding: 0 var(--space-5);

	h2 {
		font-size: var(--font-size-4xl);
		font-weight: var(--font-weight-bold);
		color: var(--text-title);
		margin-bottom: var(--space-4);
		line-height: var(--line-height-tight);
	}

	p {
		color: var(--text-secondary);
		font-size: var(--font-size-lg);
		line-height: var(--line-height-relaxed);
		margin: 0;
	}
}

/* ===========================================
 * 服务网格布局
 * =========================================== */

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--space-6);
	margin-top: var(--space-8);
}

/* ===========================================
 * 服务卡片样式
 * =========================================== */

.service-card {
	background: var(--card-bg);
	border-radius: var(--radius-xl);
	box-shadow: var(--card-shadow);
	transition: all var(--transition-base);
	padding: var(--space-8) var(--space-6);
	cursor: pointer;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--card-border);
	backdrop-filter: var(--card-backdrop);

	&:hover {
		box-shadow: var(--card-hover-shadow);
		transform: var(--card-hover-transform);
		background: var(--card-hover-bg);
	}

	/* 底部装饰条动画 */
	&::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background: var(--brand-primary);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--transition-base);
	}

	&:hover::before {
		transform: scaleX(1);
	}

	/* 服务图标 */
	.service-icon {
		width: 64px;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-full);
		background: var(--brand-primary-50);
		margin-bottom: var(--space-6);
		transition: all var(--transition-base);

		svg {
			color: var(--brand-primary);
			transition: color var(--transition-base);
		}
	}

	/* 服务标题 */
	.service-title {
		font-size: var(--font-size-xl);
		margin: 0 0 var(--space-4) 0;
		color: var(--text-heading);
		transition: color var(--transition-base);
		font-weight: var(--font-weight-semibold);
		line-height: var(--line-height-tight);
	}

	/* 服务描述 */
	.service-description {
		font-size: var(--font-size-sm);
		color: var(--text-secondary);
		line-height: var(--line-height-relaxed);
		margin: 0;
	}

	/* 悬停效果 */
	&:hover {
		.service-title {
			color: var(--text-title);
		}

		.service-icon {
			transform: scale(1.1);
			background: var(--brand-primary-100);

			svg {
				color: var(--brand-primary-600);
			}
		}
	}

	/* 活跃状态 */
	&.active {
		background: var(--content-hover-bg);
		border-color: var(--brand-primary);

		.service-title {
			color: var(--text-title);
		}

		&::before {
			transform: scaleX(1);
		}
	}
}

/* ===========================================
 * 响应式设计
 * =========================================== */

@media (max-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: var(--breakpoint-md)) {
	.service-intro {
		margin-bottom: var(--space-12);
		padding: 0 var(--space-3);

		h2 {
			font-size: var(--font-size-3xl);
		}

		p {
			font-size: var(--font-size-base);
		}
	}

	.services-grid {
		gap: var(--space-4);
		padding: 0 var(--space-2);
	}

	.service-card {
		padding: var(--space-6) var(--space-4);

		.service-icon {
			width: 48px;
			height: 48px;
			margin-bottom: var(--space-4);

			svg {
				width: 24px;
				height: 24px;
			}
		}

		.service-title {
			font-size: var(--font-size-lg);
			line-height: var(--line-height-snug);
		}

		.service-description {
			font-size: var(--font-size-xs);
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.services-grid {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.service-intro h2 {
		font-size: var(--font-size-2xl);
	}

	.service-card {
		padding: var(--space-5) var(--space-3);

		.service-title {
			font-size: var(--font-size-base);
		}
	}
}
</style>
